<template>
    <el-card>
        <template #header>
            <el-form inline :model="searchData">
                <el-form-item label="级别名称">
                    <el-input placeholder="级别名称" v-model="searchData.levelName"></el-input>
                </el-form-item>
                <el-form-item label="级别状态">
                    <el-select v-model="searchData.levelStatus" clearable placeholder="级别状态" style="width: 240px">
                        <el-option label="弃用" value="1" />
                        <el-option label="禁用" value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleSearch">
                        <template #icon>
                            <span class="iconfont icon-jichushujuguanli"></span>
                        </template>
                        <template #default>
                            搜索
                        </template>
                    </el-button>
                </el-form-item>
            </el-form>
        </template>
        <el-table :data="tableData" border>
            <el-table-column type="index" label="序号" width="80"></el-table-column>
            <el-table-column label="级别名称" prop="levelName"></el-table-column>
            <el-table-column label="级别状态" prop="levelStatus">
                <template #default="scope">
                    <el-tag v-if="scope.row.levelStatus === 1">启用</el-tag>
                    <el-tag v-if="scope.row.levelStatus === 2">禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary" @click="handleEdit(scope)">编辑</el-button>
                    <el-button type="danger" @click="handleDelete(scope)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                :page-sizes="[5, 10, 20, 50]" layout="total, sizes, prev, pager, next, jumper" :total="400" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </template>
    </el-card>
</template>

<script setup>
import { reactive } from 'vue';
import { loadNurseLevelAPI } from '@/api/nurse';

// 搜索框中得数据
let searchData = reactive({
    levelName:"",
    levelStatus:"",
})
// 点击搜索按钮
const handleSearch = () => { }

// 定义表格数据
let tableData = reactive([])

// 定义方法，在页面初始化得时候，需要加载当前表格需要得数据
const loadTableData = () => { 
    loadNurseLevelAPI().then(resp => {
        if (resp.code == 2000) { 
            tableData.push(...resp.data.rows)
        }
     })
}
loadTableData()

// 页面上表格中得编辑按钮对应得方法
function handleEdit() { }
const  handleDelete = () =>{ }

</script>

<style lang="less" scoped>

</style>